<template>
    <div>
        <el-button
            size="mini"
            type="primary"
            :loading="binNumLoading"
            class="refresh-btn"
            @click="isRefresh"
            icon="el-icon-refresh"
            >刷新</el-button
        >
        <div
            v-loading="tab1Loading"
            element-loading-background="rgba(0, 0, 0, 0.08)"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
        >
            <el-card class="box-card">
                <el-form class="basic-form">
                    <el-form-item label="环境温度(1,2)：">
                        <span>{{ cardForm["06010042"] }}</span>
                    </el-form-item>
                    <el-form-item label="系统配置：">
                        <span>{{ cardForm["06010041"] }}</span>
                    </el-form-item>
                    <el-form-item label="物联网卡号：">
                        <span>{{ cardForm["06010040"] }}</span>
                    </el-form-item>
                </el-form>
            </el-card>
            <div class="binNum">
                格口数量：{{ binNum }}
                <el-switch v-model="binSwitch" class="binSwitch"> </el-switch>
                <i class="el-icon-question"></i>
                <span>开关打开后，点击刷新会先读取设备格口数量</span>
            </div>
            <el-form ref="binForm" :model="binForm" class="binForm">
                <el-row :gutter="10" style="width: 100%">
                    <el-col
                        :lg="8"
                        :xl="6"
                        v-for="(one, index) in binForm.entitys"
                        :key="index"
                    >
                        <el-card style="width: 100%" class="one-card">
                            <span class="binIndex-btn">{{ index + 1 }}</span>
                            <div class="boxForm bin-form">
                                <el-form-item label="输入电压:">
                                    <span>{{ one["06010035"] }} V</span>
                                </el-form-item>
                                <el-form-item label="输出电压:">
                                    <span>{{ one["06010033"] }} V</span>
                                </el-form-item>
                                <el-form-item label="输出电流:">
                                    <span>{{ one["06010034"] }} A</span>
                                </el-form-item>
                                <el-form-item label="仓温度:">
                                    <span>{{ one["06010038"] }} ℃</span>
                                </el-form-item>
                                <el-form-item label="门轴状态:">
                                    <el-tag
                                        type="danger"
                                        size="mini"
                                        v-if="one['06010043'] === '0'"
                                        >打开</el-tag
                                    >
                                    <el-tag
                                        type="success"
                                        size="mini"
                                        v-else-if="one['06010043'] === '1'"
                                        >关闭</el-tag
                                    >
                                    <span v-else>{{ one["06010043"] }}</span>
                                </el-form-item>
                                <el-form-item label="仓锁状态:">
                                    <el-tag
                                        type="danger"
                                        size="mini"
                                        v-if="one['06010036'] === '0'"
                                        >打开</el-tag
                                    >
                                    <el-tag
                                        type="success"
                                        size="mini"
                                        v-else-if="one['06010036'] === '1'"
                                        >关闭</el-tag
                                    >
                                    <span v-else>{{ one["06010036"] }}</span>
                                </el-form-item>
                                <el-form-item label="电池在位状态:">
                                    <el-tag
                                        v-if="one['06010037'] === '0'"
                                        type="success"
                                        size="mini"
                                        >不在位</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010037'] === '1'"
                                        type="danger"
                                        size="mini"
                                        >在位</el-tag
                                    >
                                    <span v-else>{{ one["06010037"] }}</span>
                                </el-form-item>
                                <el-form-item label="仓状态:">
                                    <el-tag
                                        v-if="one['06010039'] === '0'"
                                        type="success"
                                        size="mini"
                                        >空仓</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010039'] === '1'"
                                        type="danger"
                                        size="mini"
                                        >充电中</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010039'] === '2'"
                                        type="danger"
                                        size="mini"
                                        >充满电</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010039'] === '3'"
                                        type="danger"
                                        size="mini"
                                        >禁用</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010039'] === '4'"
                                        type="danger"
                                        size="mini"
                                        >停充</el-tag
                                    >
                                    <span v-else>{{ one["06010039"] }}</span>
                                </el-form-item>

                                <el-form-item label="禁仓原因:">
                                    <!-- 仓状态禁用时显示 -->
                                    <span v-if="one['06010039'] === '3'">{{ one['binForbidReason'] }}</span>
                                </el-form-item>
                                <el-form-item label="温度采样:">
                                    <span>{{ one["06010066"] }}</span>
                                </el-form-item>
                                <el-form-item label="行程开关在位状态:">
                                    <el-tag
                                        v-if="one['06010067'] === '0'"
                                        type="danger"
                                        size="mini"
                                        >开</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010067'] === '1'"
                                        type="success"
                                        size="mini"
                                        >关</el-tag
                                    >
                                    <span v-else>{{ one["06010067"] }}</span>
                                </el-form-item>

                                <el-form-item label="电池编码:">
                                    <span>{{ one["06010082"] }} </span>
                                </el-form-item>
                                <el-form-item label="在位电压:">
                                    <span>{{ one["06010083"] }} </span>
                                </el-form-item>

                                <el-form-item label="电池SOC:">
                                    <el-tag
                                        v-if="one['06010068'] === '0'"
                                        type="danger"
                                        size="mini"
                                        >开</el-tag
                                    >
                                    <el-tag
                                        v-else-if="one['06010068'] === '1'"
                                        type="success"
                                        size="mini"
                                        >关</el-tag
                                    >
                                    <span v-else>{{ one["06010068"] }}</span>
                                </el-form-item>
                                <el-form-item label="电池充电电压:">
                                    <span>{{ one["06010069"] }}</span>
                                </el-form-item>
                                <el-form-item label="电池充电电流:">
                                    <span>{{ one["06010070"] }}</span>
                                </el-form-item>
                                <el-form-item label="输出连接器阻抗:">
                                    <span>{{ one["06010071"] }}</span>
                                </el-form-item>
                                <el-form-item label="输入连接器阻抗:">
                                    <span>{{ one["06010072"] }}</span>
                                </el-form-item>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-card class="box-card">
            <el-form class="basic-form" :model="currentRow">
                <el-form-item label="设备型号：">
                    <span>{{ currentRow.equipModelName }}</span>
                </el-form-item>
                <el-form-item label="厂商：">
                    <span>{{ currentRow.organizationName }}</span>
                </el-form-item>
                <el-form-item label="业务状态：">
                    <!-- 1已开通,2未交付,3调试中 -->
                    <span v-if="currentRow.status == '1'">已开通</span>
                    <span v-else-if="currentRow.status == '2'">未交付</span>
                    <span v-else-if="currentRow.status == '3'">调试中</span>
                </el-form-item>
                <el-form-item label="运营商：">
                    <span>{{ currentRow.operatorName }}</span>
                </el-form-item>
                <el-form-item label="地址：">
                    <span>{{ currentRow.address }}</span>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { equipment } from "@/api/factuer";
import { alarms } from "@/api/manage";
import { handleConfirm } from "@/utils/messageBox";

import { alarmSemaphoreCode } from "@/utils/config";
export default {
    props: {
        currentRow: {
            typeof: Object,
            default: {},
        },
        boxVisible: {
            typeof: Boolean,
            default: false,
        },
    },
    data() {
        return {
            binForm: { entitys: [] },
            cardForm: {
                "06010042": undefined,
                "06010040": undefined,
                "06010041": undefined,
            },
            tab1Loading: false,
            binNumLoading: false,
            binNum: null,
            binSwitch: false,
        };
    },
    watch: {
        boxVisible: {
            immediate: true,
            deep: true,
            handler(value) {
                if (value) {
                    this.readBinIndex();
                } else {
                    //弹框关闭，数据重置
                    this.resetData();
                }
            },
        },
    },
    methods: {
        resetData() {
            this.binForm = { entitys: [] };
            this.cardForm = {
                "06010042": undefined,
                "06010040": undefined,
                "06010041": undefined,
            };
            this.tab1Loading = false;
            this.binNumLoading = false;
            this.binNum = null;
            this.binSwitch = false;
        },
        isRefresh() {
            handleConfirm(`确定要刷新吗？`, "warning", "提示")
                .then((res) => {
                    this.doRefreshBin();
                })
                .catch((err) => {});
        },
        doRefreshBin() {
            this.binNumLoading = this.binSwitch;
            if (this.binSwitch) {
                this.readBinIndex();
            } else {
                this.doRead();
            }
        },
        // 读取格口数量
        readBinIndex() {
            this.binForm.entitys = [];
            equipment(
                `/operate/param/read/bincount/${this.currentRow.id}`,
                "post",
                { refresh: this.binSwitch },
                2
            )
                .then((res) => {
                    this.binNum = res.data;
                    if (this.binNum) {
                        for (let i = 0; i < this.binNum; i++) {
                            let one = {
                                "06010035": undefined,
                                "06010033": undefined,
                                "06010034": undefined,
                                "06010038": undefined,
                                "06010043": undefined,
                                "06010036": undefined,
                                "06010037": undefined,
                                "06010039": undefined,

                                "06010066": undefined,
                                "06010067": undefined,
                                "06010082": undefined,
                                "06010083": undefined,
                                "06010068": undefined,
                                "06010069": undefined,
                                "06010070": undefined,
                                "06010071": undefined,
                                "06010072": undefined,
                            };
                            this.binForm.entitys.push(one);
                        }
                        this.doRead();
                    }
                })
                .finally(() => (this.binNumLoading = false));
        },
        doRead() {
            this.tab1Loading = true;
            let params = {
                entitys: [],
                equipId: this.currentRow.id,
            };
            for (let i = 0; i < this.binNum; i++) {
                params.entitys.push(
                    { addrId: i + 1, id: "06010035" },
                    { addrId: i + 1, id: "06010033" },
                    { addrId: i + 1, id: "06010034" },
                    { addrId: i + 1, id: "06010038" },
                    { addrId: i + 1, id: "06010043" },
                    { addrId: i + 1, id: "06010036" },
                    { addrId: i + 1, id: "06010037" },
                    { addrId: i + 1, id: "06010039" },

                    { addrId: i + 1, id: "06010066" },
                    { addrId: i + 1, id: "06010067" },
                    { addrId: i + 1, id: "06010082" },
                    { addrId: i + 1, id: "06010083" },
                    { addrId: i + 1, id: "06010068" },
                    { addrId: i + 1, id: "06010069" },
                    { addrId: i + 1, id: "06010070" },
                    { addrId: i + 1, id: "06010071" },
                    { addrId: i + 1, id: "06010072" }
                );
            }
            for (const key in this.cardForm) {
                params.entitys.push({ id: key });
            }
            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;

                    datas.forEach((item) => {
                        this.binForm.entitys.forEach((pp, index) => {
                            for (const key in pp) {
                                if (
                                    item.addrId == index + 1 &&
                                    item.id == key
                                ) {
                                    pp[key] = item.value;
                                }
                            }
                        });
                        for (const key in this.cardForm) {
                            if (key == item.id) {
                                this.cardForm[key] = item.value;
                            }
                        }
                    });

                    if(res.code ==200){
                        this.doBinReason();
                    }
                })
                .finally(() => {
                    this.tab1Loading = false;
                });
        },
        // 读取禁仓原因
        doBinReason() {
            alarms(
                `/existing/${this.currentRow.id}/${alarmSemaphoreCode}`,
                "post"
            ).then((res) => {
                let datas = res.data;
                
                datas.forEach((item) => {
                    this.binForm.entitys.forEach((pp, index) => {
                        for (const key in pp) {
                            if (item.addrId == index + 1) {
                                pp['binForbidReason'] = item.value;
                            }
                        }
                    });
                });
                this.$forceUpdate();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";

.binForm {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    .one-card {
        margin-bottom: 10px;
    }

    .el-form-item {
        width: 100%;
        // height: 22px;
        margin-bottom: 0;
        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
            line-height: 22px;
        }
        ::v-deep .el-form-item__label {
            text-align: left;
        }
    }
    ::v-deep .el-card__body {
        position: relative;
        padding: 5px 0 5px 10px;
    }
}
.binIndex-btn {
    width: 100%;
    z-index: 99;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12em;
    color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-style: italic;
    text-align: center;
}
.operate-btns {
    width: 100%;
    text-align: right;
}
.basic-form {
    width: 100%;
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    padding: 10px 5px;
    .el-form-item {
        width: 33.33%;
        margin-bottom: 0;
        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
            line-height: 22px;
        }
    }
}
.box-card {
    ::v-deep .el-card__body {
        width: 100%;
        padding: 0 10px;
    }
}
.refresh-btn {
    position: absolute;
    top: 16px;
    right: 50px;
}
.el-icon-question {
    font-size: 20px;
    margin: 0 6px 0 10px;
    color: #f56c6c;
}
.binNum {
    margin: 10px 0;
    .binSwitch {
        margin: -5px 0 0 15px;
    }
}

@media only screen and (min-width: 1200px) {
    .el-col-lg-8 {
        // width: 25% !important;
    }
}
@media only screen and (min-width: 1920px) {
    .el-col-xl-6 {
        // width: 20% !important;
    }
}
</style>
